<template>
    <div>
        <hd-tab :tabs="tabs" />
        <el-alert type="info">
            <i class="fa fa-info-circle" aria-hidden="true"></i> 站长拥有对 <span class="text-green-800">{{ site.title }}</span> 站点管理的全部权限
        </el-alert>
        <el-table :data="users" style="width: 100%" border class="mt-3" :stripe="true" :highlight-current-row="true" v-loading="loading">
            <el-table-column prop="id" label="编号" width="60"> </el-table-column>
            <el-table-column prop="name" label="昵称" width="200"> </el-table-column>
            <el-table-column label="头像" width="150" #default="{row:admin}">
                <el-popover placement="top" width="200" trigger="hover">
                    <el-image :src="admin.icon" fit="cover" class="w-200 h-200"></el-image>
                    <el-image slot="reference" :src="admin.icon" fit="cover" class="w-8 h-8"></el-image>
                </el-popover>
            </el-table-column>
            <el-table-column prop="email" label="邮箱" width="200"> </el-table-column>
            <el-table-column prop="mobile" label="手机号" width="200"> </el-table-column>
            <el-table-column prop="mobile" label="角色" #default="{row:admin}">
                <el-tag
                    v-for="role in admin.roles"
                    :key="role.id"
                    effect="plain"
                    type="mini"
                    class="mr-1 cursor-pointer"
                    @click="$router.push({ name: 'site.role.edit', query: { sid, id: role.id } })"
                >
                    <el-popover placement="top" width="600" trigger="hover">
                        <el-tag
                            type="primary"
                            effect="plain"
                            size="mini"
                            v-for="permission in role.permissions"
                            :key="permission.id"
                            class="mr-2 mb-2 opacity-90"
                        >
                            {{ permission.title }}
                            <span class="text-xs text-gray-500 opacity-75">{{ permission.name }}</span>
                        </el-tag>
                        <span slot="reference">{{ role.title }}</span>
                    </el-popover>
                </el-tag>
            </el-table-column>
            <el-table-column width="200" align="center" #default="{row:user}">
                <el-button-group>
                    <el-button type="danger" :user="user" size="small" @click="$router.push({ name: 'site.admin.role', query: { sid, id: user.id } })">
                        设置角色
                    </el-button>
                    <el-button type="info" size="small" @click="remove(user)">移除</el-button>
                </el-button-group>
            </el-table-column>
        </el-table>
        <div class="mt-3">
            <hd-user-search title="选择管理员" @change="setAdmin" />
        </div>
    </div>
</template>
<script>
import tabs from './tabs'
export default {
    data() {
        return { tabs, site: {}, users: [], sid: this.$route.query.sid, loading: true }
    },
    async created() {
        this.site = await axios.get(`site/${this.sid}`)
        this.users = await axios.get(`site/${this.sid}/admin`)
        this.loading = false
    },
    methods: {
        //设置管理员
        async setAdmin(user) {
            await axios.put(`site/${this.sid}/admin/${user.id}`)
            this.users.push(user)
        },
        //移除管理员
        async remove(user) {
            this.$confirm('确定删除吗？', '温馨提示').then(async () => {
                await axios.delete(`site/${this.sid}/admin/${user.id}`)
                this.users.splice(this.users.indexOf(user), 1)
            })
        }
    }
}
</script>

<style></style>
